<template>
  <div class="app-container">
      <el-row style="left: 90%;">
        <el-button type="primary" @click="back" round size="small">返回</el-button>
      </el-row>
      <el-descriptions title="用例信息" :contentStyle="CS" :label-style="LS " :column="3" style="align-self: center;">
        <el-descriptions-item label="用例id">{{caseDaoDetailInfo.caseId}}</el-descriptions-item>
        <el-descriptions-item label="用例名称">{{caseDaoDetailInfo.caseName}}</el-descriptions-item>
        <el-descriptions-item label="接口名称">{{caseDaoDetailInfo.interfaceName}}</el-descriptions-item>
        <el-descriptions-item label="参数类型">{{caseDaoDetailInfo.parameterType}}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{caseDaoDetailInfo.requsetMethod}}</el-descriptions-item>
        <el-descriptions-item label="请求路径">{{caseDaoDetailInfo.requestPath}}</el-descriptions-item>
        <el-descriptions-item label="ip地址">{{caseDaoDetailInfo.ip}}</el-descriptions-item>
        <el-descriptions-item label="端口">{{caseDaoDetailInfo.port}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{caseDaoDetailInfo.createTime}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{caseDaoDetailInfo.remark}}</el-descriptions-item>
      </el-descriptions>
    <br />
    <!--    请求头参数 -->
    <el-row style="left: 90%;">
      <el-button type="success" @click="dialogFormAddVisible=true" round size="small">新增参数</el-button>
    </el-row>
    <div>
      <el-descriptions title="请求头">
      </el-descriptions>
        <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="headerRecords"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="id" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="type" label="请求类型" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="paramName" label="参数名称" width="200" align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="update(row.id)">{{ row.paramName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paramValue" label="参数值" align="center" :show-overflow-tooltip='true' min-width="100">
        </el-table-column>
        <el-table-column prop="spreading" label="是否必传" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="paramType" label="字段类型" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="explainText" label="说明" min-width="100" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteOne(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    请求体参数 -->
    <div>
      <el-descriptions title="请求体">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="bodyRecoreds"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="id" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="type" label="请求类型" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="paramName" label="参数名称" width="200" align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="update(row.id)">{{ row.paramName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paramValue" label="参数值" align="center" :show-overflow-tooltip='true' min-width="100">
        </el-table-column>
        <el-table-column prop="spreading" label="是否必传" min-width="60" align="center">
        </el-table-column>
         <el-table-column prop="paramType" label="字段类型" min-width="100" align="center">
         </el-table-column>
        <el-table-column prop="explainText" label="说明" min-width="100" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteOne(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!--    URL参数 -->
    <div>
      <el-descriptions title="URL参数 ">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="urlRecoreds"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="id" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column prop="type" label="请求类型" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="paramName" label="参数名称" width="200" align="center">
          <template slot-scope="{row}">
             <span class="link-type" @click="update(row.id)">{{ row.paramName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paramValue" label="参数值" :show-overflow-tooltip='true' align="center" min-width="100">
        </el-table-column>
        <el-table-column prop="spreading" label="是否必传" min-width="60" align="center">
        </el-table-column>
         <el-table-column prop="paramType" label="字段类型" min-width="100" align="center">
         </el-table-column>
        <el-table-column prop="explainText" label="说明" min-width="100" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button @click="update(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteOne(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--    全局参数 -->
    <div>
      <el-descriptions title="全局参数">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="autoGlobalList"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column fixed prop="globalId" label="ID" width="50" align="center" :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column prop="parameType" label="请求类型" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="parameName" label="参数名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="defaultValue" label="参数值" align="center" :show-overflow-tooltip='true' min-width="100">
        </el-table-column>
        <el-table-column prop="isRequired" label="是否必填" min-width="60" align="center">
        </el-table-column>
        <el-table-column prop="globalState" label="是否启用" min-width="100" align="center">
        </el-table-column>
         <el-table-column prop="remark" label="备注" min-width="100" align="center">
         </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="300" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 参数编辑页面 -->
    <el-dialog title="编辑参数" :visible.sync="dialogFormVisible">
      <el-form :model="paramsUpdate">
        <el-form-item label="参数名称:" :label-width="formLabelWidth">
          <el-input v-model="paramsUpdate.paramName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数值:" :label-width="formLabelWidth">
          <el-input v-model="paramsUpdate.paramValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否必传:" :label-width="formLabelWidth">
          <el-select v-model="paramsUpdate.spreading" filterable placeholder="请选择">
            <el-option v-for="item in spreadingList" :key="item.id" :label="item.name" :value="item.spreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段类型:" :label-width="formLabelWidth">
          <el-select v-model="paramsUpdate.paramType" filterable placeholder="请选择">
             <el-option v-for="item in paramsList" :key="item.id" :label="item.typename" :value="item.typespreading">
            </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="说明:" :label-width="formLabelWidth">
          <el-input v-model="paramsUpdate.explainText" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateParams()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 参数新增页面 -->
    <el-dialog title="新增参数" :visible.sync="dialogFormAddVisible">
      <el-form :model="paramsAdd">
        <el-form-item label="参数名称:" :label-width="formLabelWidth">
          <el-input v-model="paramsAdd.paramName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数值:" :label-width="formLabelWidth">
          <el-input v-model="paramsAdd.paramValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="参数类型:" :label-width="formLabelWidth">
          <el-select v-model="paramsAdd.type" filterable placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.id" :label="item.typename" :value="item.typespreading">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否必传:" :label-width="formLabelWidth">
          <el-select v-model="paramsAdd.spreading" filterable placeholder="请选择">
            <el-option v-for="item in spreadingList" :key="item.id" :label="item.name" :value="item.spreading">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="字段类型:" :label-width="formLabelWidth">
          <el-select v-model="paramsAdd.paramType" filterable placeholder="请选择">
             <el-option v-for="item in paramsList" :key="item.id" :label="item.typename" :value="item.typespreading">
            </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="说明:" :label-width="formLabelWidth">
          <el-input v-model="paramsAdd.explainText" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddParams()">确 定</el-button>
      </div>
    </el-dialog>
    <el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>
  </div>
</template>

<script>
  import BackToTop from '@/components/BackToTop'
  import waves from '@/directive/waves'
  import {getCase,getAutoGlobalList,getUpdateDetial,updateParamsPost,deleteOneParams,addParams} from '@/api/automation/params'
  export default {
    name: "Params",
    directives: { waves },
    components: { BackToTop },
    data() {
      return {
        myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },
        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'background-color': 'rgba(255, 97, 2, 0.1)',
          'min-width': '110px',
          'word-break': 'keep-all',
        },
        tableKey:0,
        listLoading: true,
        user: {},
        caseDaoDetailInfo: {},
        headerRecords: [],
        bodyRecoreds: [],
        urlRecoreds:[],
        autoGlobalList:[],
        dialogFormVisible: false,
        dialogFormAddVisible: false,
        paramsUpdate: {},
        paramsAdd: {},
        formLabelWidth: '120px',
        spreadingList: [{
            "id": 1,
            "spreading": "T",
            "name": "必传"
          },
          {
            "id": 2,
            "spreading": "F",
            "name": "不必传"
          }
        ],
        typeList: [{
            "id": 1,
            "typespreading": "B",
            "typename": "请求体参数"
          },
          {
            "id": 2,
            "typespreading": "H",
            "typename": "请求头参数"
          },
          {
            "id": 3,
            "typespreading": "C",
            "typename": "url传参"
          }
        ],
        paramsList: [{
            "id": 1,
            "typespreading": 0,
            "typename": "字段"
          },
          {
            "id": 2,
            "typespreading": 1,
            "typename": "数组"
          }
        ]
      }
    },
    methods: {
      //获取用户信息
      getUser() {
        var json = localStorage.getItem("user");
        this.user = JSON.parse(json);
      },
      //对请求数据进行清洗
      getCaseDaoDetailInfo() {
        this.listLoading = true
        var caseId = localStorage.getItem("caseId");
        this.caseDaoDetailInfo = {};
        this.headerRecords = [];
        this.bodyRecoreds = [];
        this.autoGlobalList=[];
        getCase(caseId).then(resp => {
            this.caseDaoDetailInfo = resp.data;
            if (this.caseDaoDetailInfo.paramsList.length > 0) {
              for (var i = 0; i < this.caseDaoDetailInfo.paramsList.length; i++) {
                if (this.caseDaoDetailInfo.paramsList[i].paramType == 0) {
                  this.caseDaoDetailInfo.paramsList[i].paramType = "字段";
                } else {
                  this.caseDaoDetailInfo.paramsList[i].paramType = "数组";
                }
                if (this.caseDaoDetailInfo.paramsList[i].type == "H") {
                  this.headerRecords.push(this.caseDaoDetailInfo.paramsList[i]);
                } else if(this.caseDaoDetailInfo.paramsList[i].type == "B") {
                  this.bodyRecoreds.push(this.caseDaoDetailInfo.paramsList[i]);
                }else{
                  this.urlRecoreds.push(this.caseDaoDetailInfo.paramsList[i]);
                }
              }
            }
        });
        getAutoGlobalList().then(resp=>{
           this.autoGlobalList=resp.data;
       });
       setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
      },
      //测试用例进行修改
      update(id) {
        getUpdateDetial(id).then(resp => {
            this.paramsUpdate = resp.data;
            this.dialogFormVisible = true;
        });
      },
      updateParams() {
        updateParamsPost(this.paramsUpdate).then(resp => {
            this.dialogFormVisible = false;
            this.getCaseDaoDetailInfo();
        });
      },
      deleteOne(id) {
        deleteOneParams(id).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.getCaseDaoDetailInfo();
        })
      },
      //新增参数
      AddParams() {
        var caseId = localStorage.getItem("caseId");
        var paramsAddFrom = {};
        paramsAddFrom.paramsList = [];
        paramsAddFrom.paramsList.push(this.paramsAdd);
        paramsAddFrom.caseId = caseId;
        addParams( paramsAddFrom).then(resp => {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.dialogFormAddVisible = false;
            this.getCaseDaoDetailInfo();
        });
        this.paramsAdd = {};
      },
      back() {
        this.$router.push('/automation/case');
      },
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      }

    },
    created() {
      this.getUser();
      this.getCaseDaoDetailInfo();
    }
  }

</script>

<style>
</style>
